<template>
  <el-form label-width="120px" label-position="left" :inline="false" class="px-[10px]">
    <el-form-item label="名称">
      <el-input v-model="model.name" disabled="" class="input" />
    </el-form-item>

    <el-form-item label="牵引方向" @change="orderChange">
      <el-radio-group v-model="model.order">
        <el-radio-button :value="true" size="large">正向</el-radio-button>
        <el-radio-button :value="false" size="large">反向</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="导线">
      <div class="item">
        <el-select v-model="model.daoWire" placeholder="请选择导线型号" class="select">
          <el-option v-for="wire in daoOptions" :key="wire.value" :label="wire.label" :value="wire">
            <span style="float: left" class="font-mono">{{ wire.label }}</span>
            <span style="float: right; font-size: 12px">
              {{ wire.value.wireWeight }}
            </span>
          </el-option>
        </el-select>
        <span class="txt" v-if="model.daoWire">{{ model.daoWire.value.wireWeight }}kg/m</span>
      </div>
    </el-form-item>

    <el-form-item label="牵引绳">
      <div class="item">
        <el-select v-model="model.bigWire" placeholder="请选择引绳型号" class="select">
          <el-option v-for="wire in options" :key="wire.value" :label="wire.label" :value="wire">
            <span style="float: left" class="font-mono">{{ wire.label }}</span>
            <span style="float: right; font-size: 12px">
              {{ wire.value.wireWeight }}
            </span>
          </el-option>
        </el-select>
        <span class="txt" v-if="model.bigWire">{{ model.bigWire.value.wireWeight }}kg/m</span>
      </div>
    </el-form-item>

    <el-form-item label="导线展放数量">
      <el-input-number v-model="model.num" :min="1" :max="8" :step="1" />
    </el-form-item>

    <el-form-item label="自重比载">
      <el-input-number v-model="model.e" :min="1.01" :max="1.02" :step="0.001" />
    </el-form-item>

    <el-form-item>
      <div class="w-full justify-between">
        <el-button type="primary" @click="onsubmit">计算</el-button>
        <el-button type="danger" @click="$emit('closed')">取消</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import useCalculatePower from '@/composables/useCalculatePower'
import useTower from '@/composables/useTower'
import useWire from '@/composables/useWire'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref, watchEffect } from 'vue'

const { zoneId } = defineProps({
  zoneId: { type: Number, default: 1 },
})
const emit = defineEmits(['closed'])

type OptionType<T> = {
  label: string
  value: T
}

const { findallNoPage, wires } = useWire()
const { all: findAllTower, towers } = useTower()
const { calcPower } = useCalculatePower()

const options = ref<OptionType<WireModel>[]>([])
const daoOptions = ref<OptionType<WireModel>[]>([])
const towerOptions = ref<OptionType<TowerViewModel>[]>([])

const model = reactive({
  name: '',
  isSamllQianZhang: false,
  qianYinChang: null as OptionType<TowerViewModel> | null,
  zhangLiChang: null as OptionType<TowerViewModel> | null,
  daoWire: null as OptionType<WireModel> | null,
  bigWire: null as OptionType<WireModel> | null,
  num: 2,
  order: false,
  e: 1.015,
})
let checkOrder = false

watchEffect(() => {
  model.name = '大牵张'
  if (model.bigWire?.label && model.daoWire?.label)
    model.name += `--${model.bigWire.label} 1牵${model.num} ${model.daoWire.label}`
})

async function inOptions() {
  await findAllTower({ zoneId })
  const lst_tower = towers.value!.slice(0, 2).concat(towers.value!.slice(-2))
  model.order = lst_tower[0].tName.includes('张力')
  checkOrder = model.order

  towerOptions.value.push({
    label: lst_tower[1].tName,
    value: lst_tower[0],
  })
  towerOptions.value.push({
    label: lst_tower[2].tName,
    value: lst_tower[3],
  })

  await findallNoPage()
  daoOptions.value = wires
    .value!.filter((wire) => wire.wireName.includes('导线'))
    .map((wire) => ({ label: wire.wireStyle, value: wire }))
  options.value = wires
    .value!.filter((wire) => wire.wireName.includes('引绳'))
    .map((wire) => ({ label: wire.wireStyle, value: wire }))
}

async function onsubmit() {
  if (!model.daoWire?.value) {
    ElMessage.error('导线型号不能为空')
    return
  }
  if (!model.bigWire?.value) {
    ElMessage.error('牵引绳型号不能为空')
    return
  }

  await calcPower(
    {
      QianWireId: model.bigWire?.value.id!,
      DaoWireId: model.daoWire?.value.id!,
      e: model.e,
      order: model.order,
      num: model.num,
      isSmallQianZhang: model.isSamllQianZhang,
      isCalc: false,
    },
    zoneId,
  )

  ElMessage({
    message: '恭喜您,计算成功了',
    type: 'success',
  })

  emit('closed')
}

function orderChange() {
  if (model.order !== checkOrder) {
    const tower_zhangli = towerOptions.value.find((item) => item.value.tName.includes('张力'))?.label
    const txt = `展放导线一般从大张(张力场-${tower_zhangli})放出，您现在选择的方向不对，确定进行修改吗？`
    ElMessageBox.confirm(txt, '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        ElMessage({
          type: 'success',
          message: '方向切换成功',
        })
      })
      .catch(() => {
        model.order = checkOrder
        ElMessage({
          type: 'info',
          message: '方向切换取消',
        })
      })
  } else {
    ElMessage({
      type: 'success',
      message: '方向切换成功',
    })
  }
}

inOptions()
</script>

<style scoped lang="scss">
.input {
  @apply w-[300px];
}
.select {
  @apply w-[250px];
}
.txt {
  @apply text-xs text-gray-400;
}
.item {
  @apply w-full flex justify-between items-center;
}
.ant-modal-wrap {
  z-index: 1 !important;
}
</style>
